<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a{
				border: #000000;
				text-align: center;
				
			}
		</style>
	</head>
	<body>
		<h3>JavaScript访问DOM树案例</h3>
		<h5>JavaScirpt使用api的四种方式 访问h3标签和a标签 获取它们的内容</h5>
		<h5>tag className name  id </h5>
		<a href="http://www.taobao.com" target="_blank">淘宝</a>
		<a class="jd" href="http://www.jd.com" target="_blank">京东</a>
		<a name="pdd" href="http://www.pingduoduo.com" target="_blank">拼多多</a>
		<a id="cgb" href="http://www.codeboy.com" target="_blank">培优</a>
	</body>
	<!-- type="text/javascript" 新标准可以省略 默认
	src="引入外部js jquery.js" -->
	<script type="text/javascript" >
		/* window.alert('使用js获取页面元素的内容'); */
		//BOM中提供弹出框api
		/* 获取页面a标签  返回是一个数组*/
		console.log(document.getElementsByTagName('a')[0].innerText); ///得到页面上所有a元素
		console.log(document.getElementsByTagName("a")[0].href);
		console.log(document.getElementsByClassName("jd")[0].innerText);
		console.log(document.getElementsByClassName("jd")[0].href);
		//第三种方式
		console.log(document.getElementsByName
		("pdd")[0].innerText);
		console.log(document.getElementsByName
		("pdd")[0].href);
		//第四种方式
		console.log(document.getElementById("cgb").innerText);
		/* consile.log(document.getElementById("cgb")[0].href); */
		
		document.getElementsByTagName("a")[0].innerText="百度";
		document.getElementsByTagName("a")[0].href="http://www.baidu.com";
		var a=document.getElementsByTagName("a")[0];
		a.innerText="百度";
		a.href="http://www.baidu.com";
		
	</script>
	
</html>
